<template>
  <ScreenLayoutWithMenu title="风险控制监控大屏">
    <div class="screen-grid grid-3x2">
      <ChartCard title="风险趋势" grid-area="a">
        <ECharts :option="riskTrendOption" />
      </ChartCard>
      <ChartCard title="风险类型分布" grid-area="b">
        <ECharts :option="riskTypeOption" />
      </ChartCard>
      <ChartCard title="风险指标" grid-area="c">
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">12</div>
            <div class="stat-label">高风险</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">45</div>
            <div class="stat-label">中风险</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">23</div>
            <div class="stat-label">低风险</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="处理状态" grid-area="d">
        <ECharts :option="handleStatusOption" />
      </ChartCard>
      <ChartCard title="风险等级" grid-area="e">
        <ECharts :option="riskLevelOption" />
      </ChartCard>
      <ChartCard title="预警统计" grid-area="f">
        <ECharts :option="alertOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const riskTrendOption = ref({})
const riskTypeOption = ref({})
const handleStatusOption = ref({})
const riskLevelOption = ref({})
const alertOption = ref({})

onMounted(() => {
  const days = Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
  
  riskTrendOption.value = getLineOption({
    categories: days,
    series: [{
      name: '风险数',
      data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 20) + 60)
    }]
  })

  riskTypeOption.value = getBarOption({
    categories: ['安全风险', '财务风险', '运营风险', '合规风险'],
    series: [{
      name: '数量',
      data: [25, 18, 15, 22]
    }]
  })

  handleStatusOption.value = getPieOption({
    name: '处理状态',
    data: [
      { value: 50, name: '已处理' },
      { value: 20, name: '处理中' },
      { value: 10, name: '待处理' }
    ]
  })

  riskLevelOption.value = getPieOption({
    name: '风险等级',
    data: [
      { value: 12, name: '高' },
      { value: 45, name: '中' },
      { value: 23, name: '低' }
    ]
  })

  alertOption.value = getBarOption({
    categories: ['今日', '本周', '本月'],
    series: [{
      name: '预警数',
      data: [5, 25, 80]
    }]
  })
})
</script>
